<template>
  <div class="box1">


    <div class="box">
      <div v-for="(i,index) in tixingArr" class="tixing-list-box">
        <div class="neirong">
          <span class="neirong-biaoti">标题：</span>
          <span class="neirong-neirong">{{ i.title }}</span>
        </div>
        <div class="neirong">
          <span class="neirong-biaoti">跟进时间：</span>
          <span class="neirong-neirong">{{ i.followTime }}</span>
        </div>
        <div class="neirong">
          <span class="neirong-biaoti">提醒备注：</span>
          <span class="neirong-neirong">{{ i.remark }}</span>
        </div>
        <div class="caozuo">
          <a-button type="link" @click.stop="editThis(i)">编辑</a-button>
          <a-button type="link" @click.stop="delThis(i.id)">删除</a-button>
        </div>
      </div>


    </div>

    <FollowRemindModal ref="FollowRemindModal" @ok="modalFormOk"></FollowRemindModal>
    <div @click="addThis" class="xinjian">新建跟进提醒</div>
  </div>
</template>

<script>
import { getAction, postAction, deleteAction } from '@api/manage'
// import FollowRemindModal from '@/components/FollowRemind/modules/FollowRemindModal.Style#Drawer'
import FollowRemindModal from '@/components/FollowRemind/modules/FollowRemindModal'

export default {
  name: 'FollowList',
  components: {
    FollowRemindModal
  },
  data() {
    return {
      tixingArr: [],
      record: {},
      url: {
        queryByCustomerIdList: '/followremind/followRemind/queryByCustomerIdList',//通过客户id查询跟进提醒
        deleteCustomerRemind: '/followremind/followRemind/deleteCustomerRemind'//通过id删除客户所属的跟进提醒
      }
    }
  },
  methods: {
    modalFormOk() {
      this.getID(this.record.id)
    },
    getID(e) {
      this.tixingArr = []
      this.record = e
      console.log('getID,', this.record)
      //查询列表
      getAction(this.url.queryByCustomerIdList, { id: e.id }).then(res => {
        console.log('res', res)
        this.tixingArr = res.result
        console.log('this.tixingArr', this.tixingArr)
      })
    },
    //删除
    delThis(id) {

      deleteAction(this.url.deleteCustomerRemind, { id: id }).then(res => {
        console.log(res)
        this.getID(this.record)
      }).finally(res => {

        this.$emit('ok')
      })
    },
    //格式化参数，包含title和numberType

    formatNumberType(type) {
      switch (type) {
        case 1:
          return '销售机会'
          break
        case 2:
          return '合同订单'
          break
        case 3:
          return '编号'
          break
        case 4:
          return '客户名称'
          break
      }
    },
    formatTitleType(type) {
      switch (type) {
        case 1:
          return '销售机会的跟进提醒'
          break
        case 2:
          return '合同订单的跟进提醒'
          break
        case 3:
          return '报价单的跟进提醒'
          break
        case 4:
          return '的客户跟进提醒'
          break
      }
    },
    //新增
    addThis() {

      console.log('this.record', this.record)
      let record = {
        followIdArr: (this.record.type == 1 || this.record.type == 2) ? [this.record.number] : [this.record.name],
        title: this.record.name + this.formatTitleType(this.record.type),
        numberType: this.formatNumberType(this.record.type),
        type: this.record.type,
        businessId: this.record.id,
        customerId: this.record.id,
        isAdd: true
      }
      console.log('record', record)
      this.$refs.FollowRemindModal.add(record)
      this.$refs.FollowRemindModal.followShow = true
      this.$nextTick(() => {
        this.$emit('yincang')
      })

    },
    //编辑
    editThis(record) {
      console.log('record', record)
      let obj = Object.assign(record, {
        numberType: this.formatNumberType(record.type),
        followIdArr: (this.record.type == 1 || this.record.type == 2) ? [this.record.number] : [this.record.name],
        executeType: ''//清空执行人
      })
      this.$refs.FollowRemindModal.add(obj)
      this.$refs.FollowRemindModal.followShow = true
      this.$emit('yincang')
    }
  }
}
</script>

<style scoped>
.box1 {
  display: flex;
  height: 240px;
  flex-direction: column;
  justify-content: space-between;
}

.box {
  width: 300px;
  height: 200px;
  overflow: hidden;
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
  position: relative;

}

.tixing-list-box {

  padding: 10px;
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid #e5e5e5;
}

.neirong {

  display: flex;
  flex-direction: row;
  margin-bottom: 10px;

}

.neirong-biaoti {
  width: 75px;
  color: #9e9e9e;
}

.neirong-neirong {
  width: 200px;
  color: #000;
  /*word-break: break-all;*/
  /*display: flex;
  flex-wrap: wrap;*/
}

.caozuo {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

.xinjian {
  /* position: fixed;
   bottom: 0;
   left: 0;
   z-index: 10;*/
  width: 100%;
  height: 40px;
  background: #d2ecff;
  color: #00A0E9;
  font-size: 12px;
  text-align: center;
  line-height: 40px;
}
</style>